<template>
    <div class="com-container">
        <div style="position: absolute">
            <div class="blue-bcg"></div>
            <div class="label">
                <span>法律法规</span>
                <span>公司规定</span>
                <span>契约规定</span>
                <span>其他规定</span>
            </div>
            <!-- <div class="blue-bcg2"></div> -->
        </div>

        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart" style="z-index: 11112"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'SolidBarChart',
})
// 立体柱状图
export default class SolidBarChart extends Vue {
    @Prop() data;
    @Prop() thresholdTotal;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
        // window.addEventListener('resize', this.screenAdapter);
    }

    initChart() {
        let that = this;
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            animation: false, // 是否开启动画
            // animationDuration: 1000, // 初始动画的时长
            // animationDurationUpdate: 1000, // 数据更新动画的时长
            // animationEasingUpdate: 'quadraticIn', // 数据更新动画的缓动效果
            tooltip: {
                extStyle: {
                    fontSize: 50,
                },
                trigger: '',
                padding: 1,
            },
            grid: {
                left: '10%',
                right: '10%',
                top: '7%',
                height: '66%',
                bottom: '20%',
            },
            legend: {
                data: ['警告', '送审', '禁止'],
                // data: [
                //     { name: '警告', color: '#107fff' },
                //     { name: '送审', color: '#fee15d' },
                //     { name: '禁止', color: '#ff4747' },
                // ],
                orient: 'vertical',
                right: '2%',
                itemHeight: 3,
                itemWidth: 10,
                textStyle: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: 'rgba(0, 0, 0, 0.65)',
                },
                selectedMode: false,
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
            },
            xAxis: {
                data: ['法律法规', '公司规定', '契约规定', '其他规定'],
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: 'black',
                        fontSize: 12,
                    },
                    margin: 10, // 刻度标签与轴线之间的距离。
                },
                axisLine: {
                    show: false, // 不显示x轴
                    lineStyle: {
                        color: '#cfe5ff',
                        height: '5',
                        type: 'solid',
                    },
                },
                offset: 10,
                axisTick: {
                    show: false,
                    // boundaryGap: true,
                    alignWithLabel: true,
                    length: 15,
                    lineStyle: {
                        color: '#9fccff',
                        type: 'solid',
                        width: 2,
                    },
                },
                boundaryGap: ['10%', '10%'],
                splitLine: {
                    show: false, // x垂直刻度
                    width: 0.08,
                    lineStyle: {
                        type: 'solid',
                        color: '#03202E',
                    },
                },
            },

            yAxis: {
                show: true,
                min: 0,
                z: 10,
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#DAE1F7',
                        type: 'solid',
                    },
                },
                splitNumber: 4,
                axisTick: {
                    show: true,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(70,103,216,0.2)',
                        width: 1,
                        type: 'solid',
                    },
                },
                axisLabel: {
                    showMinLabel: false, // 不显示最小刻度
                    textStyle: {
                        color: '#888',
                    },
                },
            },

            series: [
                // {
                //     name: '',
                //     type: 'bar',
                //     stack: 'one',
                // },
                {
                    // 柱底圆片
                    name: 'a',
                    type: 'pictorialBar',
                    symbolSize: [25, 5], // 调整截面形状
                    symbolOffset: [-32.5, 3],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: '#EFC600',
                            opacity: 0.7,
                        },
                    },
                    data: [],
                    // data: ['340', '205', '54', '168'],
                },
                {
                    // 柱体
                    name: '警告',
                    type: 'bar',
                    barWidth: 25,
                    barGap: '30%',
                    z: 1,
                    barMinHeight: 1,
                    itemStyle: {
                        normal: {
                            color: '#ffe257',
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            lineHeight: 5,
                            formatter: '{c}',
                            position: 'top',
                            // position: ['1%', '-16'],
                            textStyle: {
                                color: 'rgba(0, 0, 0, 0.45)',
                                fontSize: 12,
                            },
                        },
                    },
                    data: [],
                    // data: ['340', '205', '54', '168'],
                },
                {
                    // 柱顶圆片
                    name: '',
                    type: 'pictorialBar',
                    symbolSize: [25, 5], // 调整截面形状
                    symbolOffset: [-32.5, -3],
                    z: 12,
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#FFED93',
                        },
                    },
                    data: [],
                    // data: ['340', '205', '54', '168'],
                },

                {
                    // 柱底圆片
                    name: '',
                    type: 'pictorialBar',
                    symbolSize: [25, 5], // 调整截面形状
                    symbolOffset: [0, 3],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: '#0056B9',
                        },
                    },
                    data: [],
                    // data: ['340', '205', '344', '168'],
                },
                {
                    // 柱体
                    name: '送审',
                    type: 'bar',
                    barWidth: 25,
                    barGap: '30%',
                    barMinHeight: 1,
                    z: 1,
                    itemStyle: {
                        normal: {
                            color: '#107FFF',
                            // opacity: 0.7,
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            lineHeight: 5,
                            formatter: '{c}',
                            position: 'top',
                            // position: ['1%', '-16'],
                            bottom: 10,
                            textStyle: {
                                color: 'gray',
                                fontSize: 12,
                            },
                            avoidLabelOverlap: true,
                        },
                    },
                    data: [],
                    // data: ['340', '205', '54', '168'],
                },
                {
                    // 柱顶圆片
                    name: '',
                    type: 'pictorialBar',
                    symbolSize: [25, 5], // 调整截面形状
                    symbolOffset: [0, -3],
                    z: 12,
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#63ABFF',
                        },
                    },
                    data: [],
                    // data: ['340', '205', '54', '168'],
                },

                {
                    // 柱底圆片
                    name: '',
                    type: 'pictorialBar',
                    symbolSize: [25, 5], // 调整截面形状
                    symbolOffset: [32.5, 3],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: '#EF0048',
                            // opacity: 0.7,
                        },
                    },
                    data: [],
                    // data: ['230', '105', '344', '168'],
                },
                {
                    // 柱体
                    name: '禁止',
                    type: 'bar',
                    barWidth: 25,
                    barGap: '30%',
                    z: 1,
                    barMinHeight: 1,
                    itemStyle: {
                        normal: {
                            color: '#ff4747',
                            // opacity: 0.7,
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            valueAnimation: true,
                            lineHeight: 5,
                            formatter: '{c}',
                            position: 'top',
                            // position: ['1%', '-16'],
                            textStyle: {
                                color: 'gray',
                                fontSize: 12,
                            },
                        },
                    },
                    data: [],
                    // data: ['130', '205', '54', '168'],
                },
                {
                    // 柱顶圆片
                    name: '',
                    type: 'pictorialBar',
                    symbolSize: [25, 5], // 调整截面形状
                    symbolOffset: [32.5, -3],
                    z: 12,
                    symbolPosition: 'end',
                    itemStyle: {
                        normal: {
                            color: '#FF9595',
                            // opacity: 0.7,
                        },
                    },
                    data: [],
                    // data: ['130', '205', '54', '168'],
                },
            ],
        };
        this.chartInstance.setOption(initOption);
    }
    async updateChart(e) {
        console.log(e.data, '?!@');
        if (e.data && e.data.length) {
            // this.disFresh = true;
            this.$emit('disFresh', true);
            let that = this;
            let min = this.thresholdTotal / 5;
            let max = this.thresholdTotal;
            if (this.thresholdTotal === 0) {
                min = 0.2;
                max = 1;
            } else {
                min = this.thresholdTotal / 5;
                max = null;
            }
            let arrs = [
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
            ];
            let arrs2 = [];

            let datas = e.data.map(item => item.data);
            datas.forEach(element => {
                arrs2 = [...arrs2, ...element];
            });
            console.log(Math.max.apply(null, arrs2));

            let pace = (Math.max.apply(null, arrs2) / 80 / 5).toFixed(0);

            console.log(pace, 'pace');

            let maxNum = e.data.filter;
            for (let i = 0; i < datas.length; i++) {
                const real = datas[i];
                const fake = arrs[i];
                for (let r = 0; r < real.length; r++) {
                    if (fake[r] < real[r]) {
                        fake[r] += Number(pace);
                    }
                }
            }
            let newArr = [];
            for (let u = 0; u < arrs.length; u++) {
                const element = arrs[u];
                let obj = { data: arrs[u], name: e.data[u]?.name, type: e.data[u]?.type };
                newArr.push(obj);
            }
            const fakeOption = {
                xAxis: { data: e.xAxisData },
                series: newArr,
                yAxis: {
                    // 设置y轴最小刻度
                    min: () => {
                        return -0;
                    },
                    max: () => {
                        return max;
                    },
                },
            };
            this.chartInstance.setOption(fakeOption);
            const timer = setInterval(function() {
                for (let i = 0; i < datas.length; i++) {
                    const real = datas[i];
                    const fake = arrs[i];
                    for (let r = 0; r < real.length; r++) {
                        if (fake[r] < real[r]) {
                            fake[r] += Number(pace);
                        } else {
                            fake[r] = real[r];
                        }
                    }
                }
                let newArr = [];
                for (let u = 0; u < arrs.length; u++) {
                    const element = arrs[u];
                    let obj = { data: arrs[u], name: e.data[u].name, type: e.data[u].type };
                    newArr.push(obj);
                }
                const fakeOption = {
                    // xAxis: { data: e.xAxisData },
                    // yAxis: {
                    //     // 设置y轴最小刻度
                    //     min: () => {
                    //         return -min;
                    //     },
                    //     max: () => {
                    //         return max;
                    //     },
                    // },
                    series: newArr,
                };
                that.chartInstance.setOption(fakeOption);

                if (JSON.stringify(arrs) === JSON.stringify(datas)) {
                    clearInterval(timer);
                    that.$emit('disFresh', false);
                }
            }, 30);
        }

        // let interval = 0;
        // // const dataOption = {
        // //     xAxis: { data: e.xAxisData },
        // //     series: e.data,
        // // };
        // // this.chartInstance.setOption(dataOption);
        // await that.$nextTick(() => {
        //     // 获取y轴刻度区间
        //     interval = that.chartInstance.getModel().getComponent('yAxis').axis.scale._interval;
        // });
        // const newDataOption = {
        //     yAxis: {
        //         // 设置y轴最小刻度
        //         min: () => {
        //             return -interval;
        //         },
        //     },
        //     xAxis: { data: e.xAxisData },
        //     // series: e.data,
        // };
        // this.chartInstance.setOption(newDataOption);
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style lang="scss" scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.blue-bcg {
    // position: absolute;
    // z-index: 1;
    // bottom: -18.5vh;
    // left: 1vh;
    // // right: 1vh;
    // width: 47vw;
    // min-width: 600px;
    // height: 0;
    // border-bottom: 90px solid #cfe5ff;
    // border-bottom: 85px solid rgba(16, 127, 255, 0.2);
    // border-left: 120px solid transparent;
    // border-right: 120px solid transparent;

    position: absolute;
    z-index: 1;
    // bottom: -17vh;
    top: 70px;
    left: 18px;
    width: 538px;
    min-width: 538px;
    height: 90px;
    padding: 0 20px;
    // margin-bottom: 10px;
    background-image: url('../images/barBg.png');
    background-size: 100% 92px;
    background-repeat: no-repeat;
}
.label {
    position: absolute;
    z-index: 1;
    top: 158px;
    width: 538px;
    margin-left: 4px;
    min-width: 538px;
    span {
        position: absolute;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.65);
        font-weight: 600;
    }
    :nth-child(1) {
        left: 17%;
    }
    :nth-child(2) {
        left: 37%;
    }
    :nth-child(3) {
        left: 57%;
    }
    :nth-child(4) {
        left: 77%;
    }
}

.blue-bcg2 {
    position: absolute;
    z-index: 1;
    bottom: calc(-18.5vh - 10px);
    left: 1vh;
    // right: 1vh;
    width: 47vw;
    min-width: 600px;
    height: 10px;
    background-color: rgba(16, 127, 255, 0.4);
}
</style>
